{% extends 'base.html' %}
{% load static %}

{% block title %}Data Management - NEPSE Stock Forecasting{% endblock %}

{% block extra_head %}
<!-- jQuery (required for Select2) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
{% endblock %}

{% block content %}
<div class="px-4 py-6 sm:px-0">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Data Management</h1>
        <p class="mt-2 text-gray-600">Manage stock data, scraping, and model training</p>
    </div>

    <!-- Data Operations -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Data Initialization -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Data Initialization</h3>
            <p class="text-sm text-gray-600 mb-4">Initialize the system with NEPSE stocks and mixed real/historical data for comprehensive analysis.</p>
            
            <div class="space-y-4">
                <button id="initializeSampleData" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
                    <i class="fas fa-database mr-2"></i>
                    Initialize with Real + Historical Data
                </button>
                
                <div class="text-xs text-gray-500">
                    <p>This will create:</p>
                    <ul class="list-disc list-inside mt-1">
                        <li><strong class="text-green-600">Real data</strong> from live sources (last 7 days)</li>
                        <li><strong class="text-blue-600">Historical data</strong> for trend analysis (1 year)</li>
                        <li><strong class="text-purple-600">Technical indicators</strong> calculation</li>
                        <li>Sample NEPSE stocks (ADBL, NABIL, EBL, etc.)</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Data Scraping -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Data Scraping</h3>
            <p class="text-sm text-gray-600 mb-4">Scrape latest stock data from external sources - prioritizes real data over sample data.</p>
            
            <div class="space-y-4">
                <button id="scrapeLatestData" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <i class="fas fa-download mr-2"></i>
                    Scrape Real Market Data
                </button>
                
                <div class="text-xs text-gray-500">
                    <p>Data sources (in priority order):</p>
                    <ul class="list-disc list-inside mt-1">
                        <li class="text-green-600"><strong>ShareSansar</strong> (www.sharesansar.com) - Real time data</li>
                        <li class="text-green-600"><strong>MeroLagani</strong> (merolagani.com) - Historical data with ASP.NET PostBack</li>
                        <li class="text-orange-600"><strong>Sample data</strong> - Only if real sources fail</li>
                    </ul>
                </div>
                
                <!-- Real-time data status indicator -->
                <div id="scrapeStatus" class="hidden">
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-600">Data Quality:</span>
                            <span id="dataQualityIndicator" class="font-medium">-</span>
                        </div>
                        <div class="flex items-center justify-between text-sm mt-1">
                            <span class="text-gray-600">Success Rate:</span>
                            <span id="successRateIndicator" class="font-medium">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add New Stock -->
    <div class="bg-white shadow rounded-lg p-6 mb-8">
        <h3 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fas fa-plus-circle text-green-600 mr-2"></i>
            Add New Stock
        </h3>
        <p class="text-sm text-gray-600 mb-4">Enter a stock symbol (like HBL) to automatically fetch company information.</p>
        
        <!-- Simple Symbol Input Form -->
        <div id="symbolInputForm" class="space-y-4">
            <div class="flex space-x-4">
                <div class="flex-1">
                    <label for="stockSymbol" class="block text-sm font-medium text-gray-700 mb-1">
                        Stock Symbol <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="stockSymbol" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                           placeholder="e.g., HBL" maxlength="10" style="text-transform: uppercase;">
                    <p class="text-xs text-gray-500 mt-1">Enter the stock trading symbol and we'll fetch the details</p>
                </div>
                <div class="flex items-end">
                    <button id="fetchInfoBtn" class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200">
                        <i class="fas fa-search mr-2"></i>
                        Fetch Info
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Stock Information Preview (Initially Hidden) -->
        <div id="stockPreviewSection" class="hidden">
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                <h4 class="text-lg font-medium text-blue-900 mb-2">
                    <i class="fas fa-info-circle mr-2"></i>
                    Company Information Found
                </h4>
                <p class="text-sm text-blue-700 mb-3">Please review the information below and make any corrections before saving:</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Stock Symbol</label>
                        <input type="text" id="previewSymbol" class="w-full border border-gray-300 rounded-md px-3 py-2 bg-gray-100" readonly>
                    </div>
                    
                    <div>
                        <label for="previewCompanyName" class="block text-sm font-medium text-gray-700 mb-1">
                            Company Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="previewCompanyName" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                               maxlength="200">
                    </div>
                    
                    <div>
                        <label for="previewSector" class="block text-sm font-medium text-gray-700 mb-1">
                            Sector
                        </label>
                        <select id="previewSector" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Select Sector</option>
                            <option value="Banking">Banking</option>
                            <option value="Insurance">Insurance</option>
                            <option value="Hydropower">Hydropower</option>
                            <option value="Manufacturing">Manufacturing</option>
                            <option value="Hotels">Hotels</option>
                            <option value="Finance">Finance</option>
                            <option value="Microfinance">Microfinance</option>
                            <option value="Development Bank">Development Bank</option>
                            <option value="Life Insurance">Life Insurance</option>
                            <option value="Non Life Insurance">Non Life Insurance</option>
                            <option value="Trading">Trading</option>
                            <option value="Others">Others</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="previewMarketCap" class="block text-sm font-medium text-gray-700 mb-1">
                            Market Cap (NPR)
                        </label>
                        <input type="number" id="previewMarketCap" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                               min="0" step="1000000">
                    </div>
                    
                    <div>
                        <label for="previewSharesOutstanding" class="block text-sm font-medium text-gray-700 mb-1">
                            Shares Outstanding
                        </label>
                        <input type="number" id="previewSharesOutstanding" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                               min="0" step="1000">
                    </div>
                    
                    <div>
                        <label for="previewSharesansarId" class="block text-sm font-medium text-gray-700 mb-1">
                            ShareSansar Company ID
                        </label>
                        <input type="text" id="previewSharesansarId" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                               maxlength="20">
                    </div>
                </div>
                
                <div class="mt-6 flex space-x-4">
                    <button id="confirmAddBtn" class="bg-green-600 text-white py-2 px-6 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition duration-200">
                        <i class="fas fa-check mr-2"></i>
                        Confirm & Add Stock
                    </button>
                    <button id="cancelAddBtn" class="bg-gray-300 text-gray-700 py-2 px-6 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 transition duration-200">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Success/Error Message -->
        <div id="addStockMessage" class="mt-4 hidden"></div>
    </div>

    <!-- Historical Data Scraping -->
    <div class="bg-white shadow rounded-lg p-6 mb-8">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Historical Data Scraping</h3>
        <p class="text-sm text-gray-600 mb-4">Scrape historical stock data with date filtering and deduplication.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
            <div>
                <label for="startDate" class="block text-sm font-medium text-gray-700">Start Date</label>
                <input type="date" id="startDate" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                <p class="text-xs text-gray-500 mt-1">Leave empty for default (1 year ago)</p>
                <div class="mt-1 flex space-x-1">
                    <button type="button" onclick="setDateRange('1week')" class="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">1 Week</button>
                    <button type="button" onclick="setDateRange('1month')" class="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">1 Month</button>
                    <button type="button" onclick="setDateRange('3months')" class="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">3 Months</button>
                </div>
            </div>
            
            <div>
                <label for="endDate" class="block text-sm font-medium text-gray-700">End Date</label>
                <input type="date" id="endDate" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                <p class="text-xs text-gray-500 mt-1">Leave empty for today</p>
                <div class="mt-1 flex space-x-1">
                    <button type="button" onclick="setDateRange('6months')" class="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">6 Months</button>
                    <button type="button" onclick="setDateRange('1year')" class="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">1 Year</button>
                    <button type="button" onclick="setDateRange('2years')" class="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">2 Years</button>
                </div>
            </div>
            
            <div>
                <label for="recordLimit" class="block text-sm font-medium text-gray-700">Records per Stock</label>
                <select id="recordLimit" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="50">50 records</option>
                    <option value="100" selected>100 records</option>
                    <option value="200">200 records</option>
                    <option value="365">365 records (1 year)</option>
                    <option value="500">500 records</option>
                </select>
            </div>
            
            <div>
                <label for="selectedStocks" class="block text-sm font-medium text-gray-700">Select Stocks</label>
                <select id="selectedStocks" multiple class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="width: 100%;">
                    <!-- Options will be loaded dynamically -->
                </select>
                <p class="text-xs text-gray-500 mt-1">Search and select multiple stocks, leave empty for all</p>
                <div class="mt-2 flex space-x-1">
                    <button type="button" onclick="selectStockCategory('banks')" class="text-xs bg-blue-100 px-2 py-1 rounded hover:bg-blue-200">Banks</button>
                    <button type="button" onclick="selectStockCategory('all')" class="text-xs bg-green-100 px-2 py-1 rounded hover:bg-green-200">All</button>
                    <button type="button" onclick="selectStockCategory('clear')" class="text-xs bg-red-100 px-2 py-1 rounded hover:bg-red-200">Clear</button>
                </div>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Data Processing Options</h4>
                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" id="updateExisting" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                        <span class="ml-2 text-sm text-gray-700">Update existing records if data differs</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="removeDuplicates" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                        <span class="ml-2 text-sm text-gray-700">Remove duplicate dates</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="updateIndicators" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">Update technical indicators after scraping</span>
                    </label>
                </div>
            </div>
            
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Data Sources Priority</h4>
                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" id="useShareSansar" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                        <span class="ml-2 text-sm text-gray-700">ShareSansar (Primary)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="useMeroLagani" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                        <span class="ml-2 text-sm text-gray-700">MeroLagani (Fallback)</span>
                    </label>
                </div>
            </div>
        </div>
        
        <div class="flex space-x-4">
            <button id="scrapeHistoricalData" class="bg-purple-600 text-white py-2 px-6 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
                <i class="fas fa-history mr-2"></i>
                Scrape Historical Data
            </button>
            
            <button id="checkDataCoverage" class="bg-gray-600 text-white py-2 px-6 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500">
                <i class="fas fa-chart-line mr-2"></i>
                Check Data Coverage
            </button>
        </div>
        
        <div id="historicalProgress" class="hidden mt-4">
            <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-purple-600 mr-3"></div>
                    <span class="text-purple-800">Processing historical data...</span>
                </div>
                <div id="historicalLog" class="mt-2 text-sm text-purple-700 max-h-40 overflow-y-auto">
                    <!-- Historical scraping log messages will appear here -->
                </div>
                <div class="mt-3 bg-purple-100 rounded-lg p-3">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                        <div>
                            <div class="text-lg font-bold text-purple-800" id="newRecordsCount">0</div>
                            <div class="text-xs text-purple-600">New Records</div>
                        </div>
                        <div>
                            <div class="text-lg font-bold text-purple-800" id="updatedRecordsCount">0</div>
                            <div class="text-xs text-purple-600">Updated Records</div>
                        </div>
                        <div>
                            <div class="text-lg font-bold text-purple-800" id="processedStocksCount">0</div>
                            <div class="text-xs text-purple-600">Stocks Processed</div>
                        </div>
                        <div>
                            <div class="text-lg font-bold text-purple-800" id="errorStocksCount">0</div>
                            <div class="text-xs text-purple-600">Errors</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Model Training -->
    <div class="bg-white shadow rounded-lg p-6 mb-8">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Model Training</h3>
        <p class="text-sm text-gray-600 mb-4">Train LSTM and SVR models for stock price prediction.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div>
                <label for="trainingStocks" class="block text-sm font-medium text-gray-700">Select Stocks</label>
                <select id="trainingStocks" multiple class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" style="width: 100%;">
                    <!-- Options will be loaded dynamically -->
                </select>
                <p class="text-xs text-gray-500 mt-1">Search and select multiple stocks for training</p>
            </div>
            
            <div>
                <label for="trainingModels" class="block text-sm font-medium text-gray-700">Select Models</label>
                <div class="mt-1 space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" id="trainLSTM" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                        <span class="ml-2 text-sm text-gray-700">LSTM Neural Network</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="trainSVR" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                        <span class="ml-2 text-sm text-gray-700">Support Vector Regression</span>
                    </label>
                </div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700">Training Options</label>
                <div class="mt-1 space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" id="tuneHyperparameters" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">Tune Hyperparameters</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="saveModels" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                        <span class="ml-2 text-sm text-gray-700">Save Trained Models</span>
                    </label>
                </div>
            </div>
        </div>
        
        <button id="startTraining" class="bg-purple-600 text-white py-2 px-6 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <i class="fas fa-brain mr-2"></i>
            Start Training
        </button>
        
        <div id="trainingProgress" class="hidden mt-4">
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 mr-3"></div>
                    <span class="text-blue-800">Training in progress...</span>
                </div>
                <div id="trainingLog" class="mt-2 text-sm text-blue-700 max-h-32 overflow-y-auto">
                    <!-- Training log messages will appear here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Data Statistics -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Database Statistics -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Database Statistics</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">Total Stocks:</span>
                    <span class="text-sm font-medium text-gray-900" id="dbStocks">-</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">Stock Data Records:</span>
                    <span class="text-sm font-medium text-gray-900" id="dbStockData">-</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">Total Predictions:</span>
                    <span class="text-sm font-medium text-gray-900" id="dbPredictions">-</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">Trained Models:</span>
                    <span class="text-sm font-medium text-gray-900" id="dbModels">-</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">Latest Data Date:</span>
                    <span class="text-sm font-medium text-gray-900" id="dbLatestDate">-</span>
                </div>
            </div>
            
            <button id="refreshStats" class="mt-4 w-full bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500">
                <i class="fas fa-sync-alt mr-2"></i>
                Refresh Statistics
            </button>
        </div>

        <!-- Data Sources Status -->
        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Data Sources Status</h3>
                <button id="refreshDataSources" class="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
                    <i class="fas fa-sync-alt mr-1"></i>
                    Refresh
                </button>
            </div>
            <div class="space-y-4">
                <div class="border border-gray-200 rounded-lg p-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-medium text-gray-900">ShareSansar</h4>
                            <p class="text-xs text-gray-500">www.sharesansar.com</p>
                        </div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800" id="sharesansarStatus">
                            Active
                        </span>
                    </div>
                    <div class="mt-2 text-xs text-gray-600">
                        <p>Last scraped: <span id="sharesansarLastScraped">-</span></p>
                        <p>Success rate: <span id="sharesansarSuccessRate">-</span></p>
                    </div>
                </div>
                
                <div class="border border-gray-200 rounded-lg p-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-medium text-gray-900">MeroLagani</h4>
                            <p class="text-xs text-gray-500">merolagani.com</p>
                        </div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800" id="merolaganiStatus">
                            Active
                        </span>
                    </div>
                    <div class="mt-2 text-xs text-gray-600">
                        <p>Last scraped: <span id="merolaganiLastScraped">-</span></p>
                        <p>Success rate: <span id="merolaganiSuccessRate">-</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// CSRF Token utility functions
function getCSRFToken() {
    // Try multiple ways to get the CSRF token
    let token = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
    if (!token) {
        token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    }
    if (!token) {
        // Try to get from cookie
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            const [name, value] = cookie.trim().split('=');
            if (name === 'csrftoken') {
                token = value;
                break;
            }
        }
    }
    console.log('CSRF Token found:', token);
    return token;
}

async function fetchCSRFTokenFromAPI() {
    try {
        const response = await fetch('/api/csrf-token/');
        const data = await response.json();
        console.log('CSRF Token from API:', data.csrfToken);
        return data.csrfToken;
    } catch (error) {
        console.error('Error fetching CSRF token from API:', error);
        return null;
    }
}

async function fetchWithCSRF(url, options = {}) {
    let csrfToken = getCSRFToken();
    
    // If no token found, try to fetch from API
    if (!csrfToken) {
        console.log('No CSRF token found, fetching from API...');
        csrfToken = await fetchCSRFTokenFromAPI();
    }
    
    console.log('Using CSRF token:', csrfToken);
    
    const defaultOptions = {
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken,
        },
        credentials: 'same-origin'
    };
    
    // Merge options
    const mergedOptions = {
        ...defaultOptions,
        ...options,
        headers: {
            ...defaultOptions.headers,
            ...options.headers
        }
    };
    
    console.log('Fetch options:', mergedOptions);
    
    // Add timeout to prevent hanging requests (45 seconds)
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 45000);
    
    try {
        const response = await fetch(url, {
            ...mergedOptions,
            signal: controller.signal
        });
        clearTimeout(timeoutId);
        
        // Handle authentication errors
        if (response.status === 401 || response.status === 403) {
            showNotification('Authentication required. Please log in to access admin features.', 'error');
            // Redirect to login page after a delay
            setTimeout(() => {
                window.location.href = '/login/';
            }, 2000);
            throw new Error('Authentication required');
        }
        
        return response;
    } catch (error) {
        clearTimeout(timeoutId);
        if (error.name === 'AbortError') {
            throw new Error('Request timeout - Server took too long to respond');
        }
        throw error;
    }
}

// Utility functions
function showLoading() {
    // You can implement a loading spinner here
    console.log('Loading...');
}

function hideLoading() {
    // Hide loading spinner
    console.log('Loading complete.');
}

function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm ${
        type === 'success' ? 'bg-green-500 text-white' :
        type === 'error' ? 'bg-red-500 text-white' :
        type === 'warning' ? 'bg-yellow-500 text-black' :
        'bg-blue-500 text-white'
    }`;
    
    notification.innerHTML = `
        <div class="flex items-center justify-between">
            <span>${message}</span>
            <button onclick="this.closest('.fixed').remove()" class="ml-4 text-lg">&times;</button>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, 5000);
}

function formatNumber(num) {
    if (typeof num !== 'number') return num;
    return num.toLocaleString();
}

function setDateRange(range) {
    const today = new Date();
    const endDateInput = document.getElementById('endDate');
    const startDateInput = document.getElementById('startDate');
    
    // Set end date to today
    endDateInput.value = today.toISOString().split('T')[0];
    
    // Calculate start date based on range
    let startDate = new Date(today);
    
    switch(range) {
        case '1week':
            startDate.setDate(today.getDate() - 7);
            break;
        case '1month':
            startDate.setMonth(today.getMonth() - 1);
            break;
        case '3months':
            startDate.setMonth(today.getMonth() - 3);
            break;
        case '6months':
            startDate.setMonth(today.getMonth() - 6);
            break;
        case '1year':
            startDate.setFullYear(today.getFullYear() - 1);
            break;
        case '2years':
            startDate.setFullYear(today.getFullYear() - 2);
            break;
        default:
            startDate.setFullYear(today.getFullYear() - 1);
    }
    
    startDateInput.value = startDate.toISOString().split('T')[0];
    
    // Visual feedback
    const allButtons = document.querySelectorAll('button[onclick^="setDateRange"]');
    allButtons.forEach(btn => btn.classList.remove('bg-blue-500', 'text-white'));
    
    const clickedButton = event.target;
    clickedButton.classList.add('bg-blue-500', 'text-white');
    setTimeout(() => {
        clickedButton.classList.remove('bg-blue-500', 'text-white');
        clickedButton.classList.add('bg-gray-100');
    }, 1000);
}

function selectStockCategory(category) {
    const $stockSelect = $('#selectedStocks');
    
    switch(category) {
        case 'banks':
            // Select banking stocks
            const bankSymbols = ['ADBL', 'NABIL', 'EBL', 'NICA', 'SBI', 'HBL', 'BOKL', 'NBL', 'PRVU', 'CZBIL', 'PCBL', 'LAXMI', 'SCB', 'MBL', 'KBL', 'MLBL', 'GBIME', 'RBCL', 'NIBL'];
            $stockSelect.val(bankSymbols);
            break;
        case 'all':
            // Select all options except empty value
            const allValues = [];
            $stockSelect.find('option').each(function() {
                if ($(this).val() && $(this).val() !== '') {
                    allValues.push($(this).val());
                }
            });
            $stockSelect.val(allValues);
            break;
        case 'clear':
            // Clear all selections
            $stockSelect.val(null);
            break;
    }
    
    // Trigger change event to update Select2 display
    $stockSelect.trigger('change');
    
    // Visual feedback
    const clickedButton = event.target;
    const originalText = clickedButton.textContent;
    clickedButton.textContent = '✓ ' + originalText;
    setTimeout(() => {
        clickedButton.textContent = originalText;
    }, 1000);
}

document.addEventListener('DOMContentLoaded', function() {
    loadDatabaseStats();
    loadDataSourcesStatus();
    
    // Set default dates for historical scraping
    const today = new Date().toISOString().split('T')[0];
    const oneYearAgo = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
    
    document.getElementById('endDate').value = today;
    document.getElementById('startDate').value = oneYearAgo;
    
    // Event listeners
    document.getElementById('initializeSampleData').addEventListener('click', initializeSampleData);
    document.getElementById('scrapeLatestData').addEventListener('click', scrapeLatestData);
    document.getElementById('startTraining').addEventListener('click', startTraining);
    document.getElementById('refreshStats').addEventListener('click', loadDatabaseStats);
    document.getElementById('refreshDataSources').addEventListener('click', loadDataSourcesStatus);
    
    // Historical data event listeners
    document.getElementById('scrapeHistoricalData').addEventListener('click', scrapeHistoricalData);
    document.getElementById('checkDataCoverage').addEventListener('click', checkDataCoverage);
    
    // Add stock event listeners - Updated for new workflow
    document.getElementById('fetchInfoBtn').addEventListener('click', fetchStockInfo);
    document.getElementById('confirmAddBtn').addEventListener('click', confirmAddStock);
    document.getElementById('cancelAddBtn').addEventListener('click', cancelAddStock);
    
    // Auto-uppercase stock symbol and handle enter key
    document.getElementById('stockSymbol').addEventListener('input', function(e) {
        e.target.value = e.target.value.toUpperCase();
        // Hide preview section if user starts typing again
        if (!document.getElementById('stockPreviewSection').classList.contains('hidden')) {
            document.getElementById('stockPreviewSection').classList.add('hidden');
        }
    });
    
    document.getElementById('stockSymbol').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            fetchStockInfo();
        }
    });
    
    // Initialize Select2 for stock selectors
    initializeStockSelectors();
    
    // Load initial data
    loadDatabaseStats();
    loadDataSourcesStatus();
    loadStocksIntoSelectors();
});

// Select2 and Stock Loading Functions
function initializeStockSelectors() {
    // Initialize Select2 for Historical Data Scraping
    $('#selectedStocks').select2({
        theme: 'bootstrap-5',
        placeholder: 'Select stocks or leave empty for all',
        allowClear: true,
        closeOnSelect: false,
    });
    
    // Initialize Select2 for Model Training
    $('#trainingStocks').select2({
        theme: 'bootstrap-5',
        placeholder: 'Select stocks for training',
        allowClear: true,
        closeOnSelect: false,
    });
}

async function loadStocksIntoSelectors() {
    try {
        const response = await fetch('/api/stocks/');
        const data = await response.json();
        
        if (data.results) {
            const stocks = data.results;
            
            // Clear existing options
            $('#selectedStocks').empty();
            $('#trainingStocks').empty();
            
            // Add default "All Stocks" option for historical scraping
            $('#selectedStocks').append(new Option('All Stocks', '', false, false));
            
            // Add stock options
            stocks.forEach(stock => {
                const optionText = `${stock.symbol} - ${stock.company_name}`;
                const optionTextShort = stock.symbol;
                
                // Add to historical scraping selector (with company names)
                $('#selectedStocks').append(new Option(optionText, stock.symbol, false, false));
                
                // Add to training selector (shorter format)
                $('#trainingStocks').append(new Option(optionTextShort, stock.symbol, false, false));
            });
            
            // Refresh Select2 to show new options
            $('#selectedStocks').trigger('change');
            $('#trainingStocks').trigger('change');
            
            console.log(`Loaded ${stocks.length} stocks into selectors`);
        }
    } catch (error) {
        console.error('Error loading stocks:', error);
        showNotification('Error loading stocks', 'error');
    }
}

async function initializeSampleData() {
    if (!confirm('This will initialize sample data. Existing data may be overwritten. Continue?')) {
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetchWithCSRF('/api/initialize/', {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (response.ok) {
            let message = result.message;
            if (result.real_data_points) {
                message += ` (${result.real_data_points} real data points included)`;
            }
            if (result.data_mix) {
                message += ` - Mix: ${result.data_mix}`;
            }
            showNotification(message, 'success');
            loadDatabaseStats();
            loadDataSourcesStatus();
        } else {
            showNotification(result.error || 'Failed to initialize data', 'error');
        }
        
    } catch (error) {
        console.error('Error initializing data:', error);
        showNotification('Error initializing data', 'error');
    } finally {
        hideLoading();
    }
}

async function scrapeLatestData() {
    if (!confirm('This will scrape real market data from live sources. Continue?')) {
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetchWithCSRF('/api/scrape/', {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (response.ok) {
            let message = result.message;
            
            // Show data quality information
            if (result.real_data_sources !== undefined && result.sample_data_fallback !== undefined) {
                const realCount = result.real_data_sources;
                const sampleCount = result.sample_data_fallback;
                const successRate = result.success_rate || '0%';
                
                message += ` - Real data: ${realCount}, Sample fallback: ${sampleCount} (${successRate} success rate)`;
                
                // Update data quality indicators
                document.getElementById('scrapeStatus').classList.remove('hidden');
                
                const qualityIndicator = document.getElementById('dataQualityIndicator');
                const successIndicator = document.getElementById('successRateIndicator');
                
                if (realCount > sampleCount) {
                    qualityIndicator.innerHTML = '<span class="text-green-600">🟢 Mostly Real Data</span>';
                } else if (realCount > 0) {
                    qualityIndicator.innerHTML = '<span class="text-orange-600">🟡 Mixed Data</span>';
                } else {
                    qualityIndicator.innerHTML = '<span class="text-red-600">🔴 Sample Data Only</span>';
                }
                
                successIndicator.innerHTML = `<span class="text-blue-600">${successRate}</span>`;
            }
            
            showNotification(message, 'success');
            loadDatabaseStats();
            loadDataSourcesStatus();
        } else {
            showNotification(result.error || 'Failed to scrape data', 'error');
        }
        
    } catch (error) {
        console.error('Error scraping data:', error);
        showNotification('Error scraping data', 'error');
    } finally {
        hideLoading();
    }
}

async function startTraining() {
    const selectedStocks = $('#trainingStocks').val() || [];
    
    const trainLSTM = document.getElementById('trainLSTM').checked;
    const trainSVR = document.getElementById('trainSVR').checked;
    const tuneHyperparameters = document.getElementById('tuneHyperparameters').checked;
    
    if (!trainLSTM && !trainSVR) {
        showNotification('Please select at least one model to train', 'warning');
        return;
    }
    
    const modelTypes = [];
    if (trainLSTM) modelTypes.push('LSTM');
    if (trainSVR) modelTypes.push('SVR');
    
    const stockText = selectedStocks.length > 0 ? selectedStocks.join(', ') : 'all stocks';
    const modelText = modelTypes.join(' and ');
    
    if (!confirm(`Train ${modelText} for ${stockText}? This may take several minutes.`)) {
        return;
    }
    
    // Show training progress
    document.getElementById('trainingProgress').classList.remove('hidden');
    const trainingLog = document.getElementById('trainingLog');
    trainingLog.innerHTML = 'Starting training process...<br>';
    
    try {
        const requestBody = {
            model_types: modelTypes,
            tune_hyperparameters: tuneHyperparameters
        };
        
        if (selectedStocks.length > 0) {
            requestBody.stock_symbols = selectedStocks;
        }
        
        const response = await fetchWithCSRF('/api/train/', {
            method: 'POST',
            body: JSON.stringify(requestBody)
        });
        
        const result = await response.json();
        
        if (response.ok) {
            trainingLog.innerHTML += `${result.message}<br>`;
            
            // Show detailed results
            if (result.results) {
                for (const [modelKey, modelResult] of Object.entries(result.results)) {
                    if (modelResult.status === 'success') {
                        trainingLog.innerHTML += `✅ ${modelKey}: RMSE=${formatNumber(modelResult.rmse, 4)}, R²=${formatNumber(modelResult.r2_score, 4)}<br>`;
                    } else {
                        const reason = modelResult.reason ? ` - ${modelResult.reason}` : '';
                        trainingLog.innerHTML += `❌ ${modelKey}: Training failed${reason}<br>`;
                    }
                }
            }
            
            showNotification(result.message, 'success');
            loadDatabaseStats();
        } else {
            trainingLog.innerHTML += `❌ Error: ${result.error}<br>`;
            showNotification(result.error || 'Training failed', 'error');
        }
        
    } catch (error) {
        console.error('Error during training:', error);
        trainingLog.innerHTML += `❌ Error: ${error.message}<br>`;
        showNotification('Error during training', 'error');
    } finally {
        setTimeout(() => {
            document.getElementById('trainingProgress').classList.add('hidden');
        }, 5000);
    }
}

async function loadDatabaseStats() {
    try {
        const response = await fetch('/api/dashboard/');
        const data = await response.json();
        
        document.getElementById('dbStocks').textContent = data.total_stocks || '0';
        document.getElementById('dbPredictions').textContent = data.total_predictions || '0';
        document.getElementById('dbModels').textContent = data.models_trained || '0';
        document.getElementById('dbLatestDate').textContent = data.latest_data_date || 'No data';
        
        // Get stock data count
        const stockDataResponse = await fetch('/api/stocks/');
        const stockData = await stockDataResponse.json();
        let totalStockData = 0;
        
        if (stockData.results) {
            for (const stock of stockData.results) {
                const dataResponse = await fetch(`/api/stocks/${stock.id}/data/`);
                const data = await dataResponse.json();
                totalStockData += data.length || 0;
            }
        }
        
        document.getElementById('dbStockData').textContent = totalStockData.toString();
        
    } catch (error) {
        console.error('Error loading database stats:', error);
    }
}

function loadDataSourcesStatus() {
    // Fetch real data source status from API
    fetch('/api/data-sources/')
        .then(response => response.json())
        .then(result => {
            if (result.status === 'success' && result.data) {
                const sources = result.data;
                
                // Update ShareSansar status
                const sharesansar = sources.find(s => s.name === 'ShareSansar');
                if (sharesansar) {
                    document.getElementById('sharesansarLastScraped').textContent = 
                        sharesansar.last_scraped ? new Date(sharesansar.last_scraped).toLocaleString() : 'Never';
                    document.getElementById('sharesansarSuccessRate').textContent = 
                        sharesansar.success_rate + '%';
                }
                
                // Update MeroLagani status
                const merolagani = sources.find(s => s.name === 'MeroLagani');
                if (merolagani) {
                    document.getElementById('merolaganiLastScraped').textContent = 
                        merolagani.last_scraped ? new Date(merolagani.last_scraped).toLocaleString() : 'Never';
                    document.getElementById('merolaganiSuccessRate').textContent = 
                        merolagani.success_rate + '%';
                }
            }
        })
        .catch(error => {
            console.error('Error loading data sources status:', error);
            // Fallback to showing 'Never' and '0%'
            document.getElementById('sharesansarLastScraped').textContent = 'Never';
            document.getElementById('sharesansarSuccessRate').textContent = '0%';
            document.getElementById('merolaganiLastScraped').textContent = 'Never';
            document.getElementById('merolaganiSuccessRate').textContent = '0%';
        });
}

async function scrapeHistoricalData() {
    // Get form values
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    const limit = parseInt(document.getElementById('recordLimit').value);
    const selectedStocks = $('#selectedStocks').val() || [];
    
    const updateExisting = document.getElementById('updateExisting').checked;
    const removeDuplicates = document.getElementById('removeDuplicates').checked;
    const useShareSansar = document.getElementById('useShareSansar').checked;
    const useMeroLagani = document.getElementById('useMeroLagani').checked;
    
    // Validate inputs
    if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
        showNotification('Start date must be before end date', 'error');
        return;
    }
    
    if (!useShareSansar && !useMeroLagani) {
        showNotification('Please select at least one data source', 'error');
        return;
    }
    
    // If no stocks selected, get all active stocks
    let stocksToProcess = selectedStocks;
    if (stocksToProcess.length === 0) {
        try {
            const stocksResponse = await fetch('/api/stocks/');
            const stocksData = await stocksResponse.json();
            stocksToProcess = stocksData.results ? stocksData.results.map(stock => stock.symbol) : [];
        } catch (error) {
            showNotification('Error loading stock list', 'error');
            return;
        }
    }
    
    const stockText = stocksToProcess.length > 0 ? stocksToProcess.join(', ') : 'no stocks';
    const dateRange = startDate && endDate ? `from ${startDate} to ${endDate}` : 'for default date range';
    
    if (!confirm(`Scrape historical data for ${stockText} ${dateRange}? This will process stocks one by one to avoid rate limiting.`)) {
        return;
    }
    
    // Show progress
    document.getElementById('historicalProgress').classList.remove('hidden');
    const logElement = document.getElementById('historicalLog');
    logElement.innerHTML = `Starting historical data scraping for ${stocksToProcess.length} stocks...<br>`;
    
    // Reset counters
    let totalNewRecords = 0;
    let totalUpdatedRecords = 0;
    let processedStocks = 0;
    let errorStocks = 0;
    
    document.getElementById('newRecordsCount').textContent = '0';
    document.getElementById('updatedRecordsCount').textContent = '0';
    document.getElementById('processedStocksCount').textContent = '0';
    document.getElementById('errorStocksCount').textContent = '0';
    
    // Prepare sources array
    const sources = [];
    if (useShareSansar) sources.push('ShareSansar');
    if (useMeroLagani) sources.push('MeroLagani');
    
    logElement.innerHTML += `Configuration: ${limit} records per stock, sources: ${sources.join(', ')}<br><br>`;
    
    try {
        // Process stocks one by one to avoid rate limiting
        for (let i = 0; i < stocksToProcess.length; i++) {
            const symbol = stocksToProcess[i];
            
            try {
                logElement.innerHTML += `📊 Processing ${symbol} (${i + 1}/${stocksToProcess.length})...<br>`;
                
                // Prepare request for single stock
                const requestBody = {
                    symbol: symbol,
                    start_date: startDate || null,
                    end_date: endDate || null,
                    limit: limit,
                    sources: sources
                };
                
                const response = await fetchWithCSRF('/api/single-stock-historical/', {
                    method: 'POST',
                    body: JSON.stringify(requestBody)
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    totalNewRecords += result.new_records || 0;
                    totalUpdatedRecords += result.updated_records || 0;
                    processedStocks++;
                    
                    logElement.innerHTML += `✅ ${symbol}: ${result.new_records} new, ${result.updated_records} updated records<br>`;
                    
                    // Update counters in real-time
                    document.getElementById('newRecordsCount').textContent = totalNewRecords;
                    document.getElementById('updatedRecordsCount').textContent = totalUpdatedRecords;
                    document.getElementById('processedStocksCount').textContent = processedStocks;
                    
                } else {
                    errorStocks++;
                    const errorMsg = result.error || 'Unknown error';
                    logElement.innerHTML += `❌ ${symbol}: ${errorMsg}<br>`;
                    document.getElementById('errorStocksCount').textContent = errorStocks;
                }
                
                // Add a small delay between requests to be respectful to the server
                if (i < stocksToProcess.length - 1) {
                    await new Promise(resolve => setTimeout(resolve, 1000)); // 1 second delay
                }
                
            } catch (error) {
                errorStocks++;
                logElement.innerHTML += `❌ ${symbol}: Request failed - ${error.message}<br>`;
                document.getElementById('errorStocksCount').textContent = errorStocks;
            }
        }
        
        // Final summary
        logElement.innerHTML += `<br><strong>🎉 Scraping Complete!</strong><br>`;
        logElement.innerHTML += `📊 Total: ${totalNewRecords} new records, ${totalUpdatedRecords} updated<br>`;
        logElement.innerHTML += `✅ Successful: ${processedStocks} stocks<br>`;
        logElement.innerHTML += `❌ Failed: ${errorStocks} stocks<br>`;
        
        if (processedStocks > 0) {
            showNotification(`Successfully processed ${processedStocks} stocks with ${totalNewRecords} new records`, 'success');
            loadDatabaseStats(); // Refresh stats
        } else {
            showNotification('No stocks were successfully processed', 'error');
        }
        
    } catch (error) {
        console.error('Error in stock processing:', error);
        logElement.innerHTML += `❌ Fatal Error: ${error.message}<br>`;
        showNotification('Error processing stocks', 'error');
    } finally {
        // Hide progress after 10 seconds
        setTimeout(() => {
            document.getElementById('historicalProgress').classList.add('hidden');
        }, 10000);
    }
}

async function checkDataCoverage() {
    showLoading();
    
    try {
        const response = await fetch('/api/historical-data/');
        const result = await response.json();
        
        if (response.ok) {
            // Create a detailed coverage report
            let coverageHtml = '<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">';
            coverageHtml += '<h4 class="text-lg font-medium text-blue-900 mb-3">📊 Data Coverage Report</h4>';
            
            // Overall stats
            coverageHtml += '<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4 text-center">';
            coverageHtml += `<div class="bg-white rounded p-3">`;
            coverageHtml += `<div class="text-2xl font-bold text-blue-600">${result.total_stocks}</div>`;
            coverageHtml += `<div class="text-sm text-gray-600">Total Stocks</div>`;
            coverageHtml += `</div>`;
            coverageHtml += `<div class="bg-white rounded p-3">`;
            coverageHtml += `<div class="text-2xl font-bold text-blue-600">${result.overall_stats.stocks_with_data}</div>`;
            coverageHtml += `<div class="text-sm text-gray-600">With Data</div>`;
            coverageHtml += `</div>`;
            coverageHtml += `<div class="bg-white rounded p-3">`;
            coverageHtml += `<div class="text-2xl font-bold text-blue-600">${formatNumber(result.overall_stats.total_records)}</div>`;
            coverageHtml += `<div class="text-sm text-gray-600">Total Records</div>`;
            coverageHtml += `</div>`;
            
            const dateRange = result.overall_stats.earliest_date && result.overall_stats.latest_date
                ? Math.floor((new Date(result.overall_stats.latest_date) - new Date(result.overall_stats.earliest_date)) / (1000 * 60 * 60 * 24))
                : 0;
            coverageHtml += `<div class="bg-white rounded p-3">`;
            coverageHtml += `<div class="text-2xl font-bold text-blue-600">${dateRange}</div>`;
            coverageHtml += `<div class="text-sm text-gray-600">Days Coverage</div>`;
            coverageHtml += `</div>`;
            coverageHtml += '</div>';
            
            // Stock-wise breakdown
            coverageHtml += '<div class="bg-white rounded-lg p-3">';
            coverageHtml += '<h5 class="font-medium text-gray-900 mb-2">Stock-wise Coverage:</h5>';
            coverageHtml += '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 text-sm">';
            
            result.stocks.forEach(stock => {
                const coverage = stock.data_coverage_days;
                const statusClass = coverage > 300 ? 'text-green-600' : coverage > 100 ? 'text-yellow-600' : 'text-red-600';
                const statusIcon = coverage > 300 ? '🟢' : coverage > 100 ? '🟡' : '🔴';
                
                coverageHtml += `<div class="border rounded p-2">`;
                coverageHtml += `<div class="font-medium">${statusIcon} ${stock.symbol}</div>`;
                coverageHtml += `<div class="${statusClass}">${stock.total_records} records</div>`;
                coverageHtml += `<div class="text-xs text-gray-500">${coverage} days coverage</div>`;
                if (stock.latest_date) {
                    coverageHtml += `<div class="text-xs text-gray-500">Latest: ${stock.latest_date}</div>`;
                }
                coverageHtml += `</div>`;
            });
            
            coverageHtml += '</div></div></div>';
            
            // Show in a modal-like overlay
            const overlay = document.createElement('div');
            overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
            overlay.innerHTML = `
                <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-bold">Data Coverage Analysis</h3>
                            <button onclick="this.closest('.fixed').remove()" class="text-gray-500 hover:text-gray-700">
                                <i class="fas fa-times text-xl"></i>
                            </button>
                        </div>
                        ${coverageHtml}
                    </div>
                </div>
            `;
            
            document.body.appendChild(overlay);
            
            // Close on outside click
            overlay.addEventListener('click', (e) => {
                if (e.target === overlay) {
                    overlay.remove();
                }
            });
            
        } else {
            showNotification(result.error || 'Failed to check data coverage', 'error');
        }
        
    } catch (error) {
        console.error('Error checking data coverage:', error);
        showNotification('Error checking data coverage', 'error');
    } finally {
        hideLoading();
    }
}

// Add New Stock Functions - Two-Step Workflow
async function fetchStockInfo() {
    const symbol = document.getElementById('stockSymbol').value.trim().toUpperCase();
    
    // Validation
    if (!symbol) {
        showAddStockMessage('Please enter a stock symbol', 'error');
        return;
    }
    
    if (symbol.length > 10) {
        showAddStockMessage('Stock symbol must be 10 characters or less', 'error');
        return;
    }
    
    // Validate symbol format (only letters and numbers)
    if (!/^[A-Z0-9]+$/.test(symbol)) {
        showAddStockMessage('Stock symbol can only contain letters and numbers', 'error');
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetchWithCSRF('/api/scrape-stock-info/', {
            method: 'POST',
            body: JSON.stringify({ symbol: symbol })
        });
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            // Populate the preview form with scraped data
            populatePreviewForm(result.scraped_info);
            
            // Show the preview section
            document.getElementById('stockPreviewSection').classList.remove('hidden');
            
            // Scroll to preview section
            document.getElementById('stockPreviewSection').scrollIntoView({ behavior: 'smooth' });
            
            showAddStockMessage(result.message, 'info');
            
        } else {
            showAddStockMessage(result.error || 'Failed to fetch stock information', 'error');
        }
        
    } catch (error) {
        console.error('Error fetching stock info:', error);
        showAddStockMessage('Error fetching stock information. Please try again.', 'error');
    } finally {
        hideLoading();
    }
}

function populatePreviewForm(stockInfo) {
    document.getElementById('previewSymbol').value = stockInfo.symbol || '';
    document.getElementById('previewCompanyName').value = stockInfo.company_name || '';
    document.getElementById('previewSector').value = stockInfo.sector || 'Other';
    document.getElementById('previewMarketCap').value = stockInfo.market_cap || '';
    document.getElementById('previewSharesOutstanding').value = stockInfo.shares_outstanding || '';
    document.getElementById('previewSharesansarId').value = stockInfo.sharesansar_company_id || '';
}

async function confirmAddStock() {
    const symbol = document.getElementById('previewSymbol').value.trim().toUpperCase();
    const companyName = document.getElementById('previewCompanyName').value.trim();
    const sector = document.getElementById('previewSector').value;
    const marketCap = document.getElementById('previewMarketCap').value;
    const sharesOutstanding = document.getElementById('previewSharesOutstanding').value;
    const sharesansarId = document.getElementById('previewSharesansarId').value.trim();
    
    // Validation
    if (!symbol) {
        showAddStockMessage('Stock symbol is required', 'error');
        return;
    }
    
    if (!companyName) {
        showAddStockMessage('Company name is required', 'error');
        return;
    }
    
    if (companyName.length > 200) {
        showAddStockMessage('Company name must be 200 characters or less', 'error');
        return;
    }
    
    showLoading();
    
    try {
        const requestBody = {
            symbol: symbol,
            company_name: companyName,
            sector: sector || 'Other',
            market_cap: marketCap ? parseFloat(marketCap) : null,
            shares_outstanding: sharesOutstanding ? parseInt(sharesOutstanding) : null,
            sharesansar_company_id: sharesansarId || null
        };
        
        const response = await fetchWithCSRF('/api/add-stock/', {
            method: 'POST',
            body: JSON.stringify(requestBody)
        });
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            showAddStockMessage(result.message, 'success');
            
            // Reset the form
            resetAddStockForm();
            
            // Refresh database stats to show the new stock
            loadDatabaseStats();
            
            // Refresh stock selectors to include the new stock
            loadStocksIntoSelectors();
            
            // Show additional information
            const stockInfo = result.stock;
            setTimeout(() => {
                showAddStockMessage(
                    `Stock added successfully! You can now scrape data for ${stockInfo.symbol} or add it to your predictions.`, 
                    'info'
                );
            }, 2000);
            
        } else {
            showAddStockMessage(result.error || 'Failed to add stock', 'error');
        }
        
    } catch (error) {
        console.error('Error adding stock:', error);
        showAddStockMessage('Error adding stock. Please try again.', 'error');
    } finally {
        hideLoading();
    }
}

function cancelAddStock() {
    // Hide the preview section
    document.getElementById('stockPreviewSection').classList.add('hidden');
    
    // Clear any messages
    document.getElementById('addStockMessage').classList.add('hidden');
    
    // Focus back on the symbol input
    document.getElementById('stockSymbol').focus();
}

function resetAddStockForm() {
    // Clear the symbol input
    document.getElementById('stockSymbol').value = '';
    
    // Hide the preview section
    document.getElementById('stockPreviewSection').classList.add('hidden');
    
    // Clear all preview fields
    document.getElementById('previewSymbol').value = '';
    document.getElementById('previewCompanyName').value = '';
    document.getElementById('previewSector').value = '';
    document.getElementById('previewMarketCap').value = '';
    document.getElementById('previewSharesOutstanding').value = '';
    document.getElementById('previewSharesansarId').value = '';
    
    // Hide any messages after a short delay
    setTimeout(() => {
        document.getElementById('addStockMessage').classList.add('hidden');
    }, 5000);
}

function showAddStockMessage(message, type) {
    const messageDiv = document.getElementById('addStockMessage');
    
    // Clear existing classes and content
    messageDiv.className = 'mt-4 p-3 rounded-md';
    
    // Add appropriate styling based on type
    switch(type) {
        case 'success':
            messageDiv.classList.add('bg-green-50', 'border', 'border-green-200', 'text-green-800');
            messageDiv.innerHTML = `<div class="flex"><i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i><span>${message}</span></div>`;
            break;
        case 'error':
            messageDiv.classList.add('bg-red-50', 'border', 'border-red-200', 'text-red-800');
            messageDiv.innerHTML = `<div class="flex"><i class="fas fa-exclamation-circle text-red-500 mr-2 mt-0.5"></i><span>${message}</span></div>`;
            break;
        case 'info':
            messageDiv.classList.add('bg-blue-50', 'border', 'border-blue-200', 'text-blue-800');
            messageDiv.innerHTML = `<div class="flex"><i class="fas fa-info-circle text-blue-500 mr-2 mt-0.5"></i><span>${message}</span></div>`;
            break;
        default:
            messageDiv.classList.add('bg-gray-50', 'border', 'border-gray-200', 'text-gray-800');
            messageDiv.innerHTML = `<span>${message}</span>`;
    }
    
    messageDiv.classList.remove('hidden');
    
    // Auto-hide success messages after 5 seconds
    if (type === 'success' || type === 'info') {
        setTimeout(() => {
            messageDiv.classList.add('hidden');
        }, 5000);
    }
}
</script>
{% endblock %}